<script setup lang="ts">
import { ref, reactive } from 'vue'
import TitleBar from '@/components/common/TitleBar.vue'
import PaginationBar from '@/components/common/PaginationBar.vue'

const month = ref('2025-11')
const tableData = reactive([
  {
    date: '2020-01-01',
  },
  {
    date: '2020-01-02',
  },
  {
    date: '2020-01-03',
  },
  {
    date: '2020-01-04',
  },
  {
    date: '2020-01-05',
  },
  {
    date: '2020-01-06',
  },
])
</script>

<template>
  <div class="container">
    <title-bar>下载</title-bar>
    <div class="main">
      <!-- 月份选择 -->
      <div class="month">
        <el-text>选择时间：</el-text>
        <el-date-picker v-model="month" type="month" />
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" />
        <el-table-column label="操作">
          <template #default>
            <el-button link type="primary">下载</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <pagination-bar />
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  background-color: #fff;
}

.main {
  padding: 20px;
}

.main .month {
  display: flex;
  justify-content: end;
}

.pagination {
  padding: 20px 0;
}
</style>
